<template>
  <div id="div-1">
    <a-typography-paragraph id="div-2">
      <a-image :src="indexImage" width="100%" id="banner" :preview='false'></a-image>
    </a-typography-paragraph>
    <a-typography-paragraph id="div-3">
      <a-typography-title id="att-1" :level="3" class="text-center mt-6">核心业务</a-typography-title>
      <a-typography-paragraph class="text-center !mx-0 mt-6 flex justify-center " :gutter=[40,0] id="div-3-row">
        <a-typography-paragraph :id="`content-${index}`" v-for="(item, index) in list1" :key="index" class="flex justify-center">
          <a-typography-paragraph :id="`div-3-col-${index}`">
            <a-typography-link href="#" :id="`div-3-col-1-atl${index}`">
              <a-image :preview="false" :id="`div-3-img-1${index}`" :src="item.img"></a-image>
              <a-typography-paragraph :id="`div-3-atp-${index}`" strong class="text-lg mt-6" :class="item.color">{{item.title}}</a-typography-paragraph>
            </a-typography-link>
          </a-typography-paragraph>
          <a-divider type="vertical" :id="`divider-${index}`" class="h-56 mx-6" v-show="index != (list1.length - 1)"/>
        </a-typography-paragraph>
      </a-typography-paragraph>
    </a-typography-paragraph>
    <a-typography-paragraph class="bg-gray-300 py-6 !m-0" id="div-4">
      <a-typography-paragraph id="r-1" class="w-2 h-2 m-auto rounded-full block bg-blue-800 mb-2"></a-typography-paragraph>
      <a-typography-title :level="3" id="att-2" class="text-center">明星产品</a-typography-title>
      <a-typography-paragraph class="text-center mt-6 flex justify-center gap-1" id="div-4-row">
        <a-typography-link class="relative" id="div-4-col-1">
          <a-image :preview="false" id="div-4-col-1-img" width="100%" height="100%" src="https://picsum.photos/id/6/341/218"></a-image>
          <a-typography-paragraph id="div-4-col-1-div" class="!m-0 absolute bottom-0 w-full text-left p-2 bg-white opacity-80 ">
            <a-typography-title id="div-4-col-1-att1" class="text-left" :level="4">厨卫阳台漆</a-typography-title>
            <a-typography-paragraph class="flex" id="div-4-col-1-atp">
              <a-typography-text id="div-4-col-1-att2" class="flex-1 text-sm">• 抵御多种生活污渍</a-typography-text>
              <a-typography-text id="div-4-col-1-att3" class="flex-1 text-sm">• 有效抗菌99.9%</a-typography-text>
            </a-typography-paragraph>
          </a-typography-paragraph>
        </a-typography-link>
        <a-typography-link class="relative" id="div-4-col-2">
          <a-image :preview="false" id="div-4-col-2-img" width="100%" height="100%" src="https://picsum.photos/id/7/341/218"></a-image>
          <a-typography-paragraph id="div-4-col-2-div" class="!m-0 absolute bottom-0 w-full text-left p-2 bg-white opacity-80">
            <a-typography-title id="div-4-col-2-att1" class="text-left" :level="4">立邦全层涂装体系</a-typography-title>
            <a-typography-paragraph class="flex" id="div-4-col-2-atp">
              <a-typography-text id="div-4-col-2-att2" class="flex-1 text-sm">• 从底到面层层严苛认证</a-typography-text>
              <a-typography-text id="div-4-col-2-att3" class="flex-1 text-sm">• 胶水、零添加</a-typography-text>
            </a-typography-paragraph>
          </a-typography-paragraph>
        </a-typography-link>
        <a-typography-paragraph class="basis-1/12 flex justify-between flex-col gap-1 !m-0" id="div-4-col-3">
          <a-typography-link href="#" id="div-4-col-3-atl1"><a-image id="div-4-col-3-img-1" width="100%" :preview="false" src="https://picsum.photos/id/8/106/68"></a-image></a-typography-link>
          <a-typography-link href="#" id="div-4-col-3-atl2"><a-image id="div-4-col-3-img-2" width="100%" :preview="false" src="https://picsum.photos/id/9/106/68"></a-image></a-typography-link>
          <a-typography-link href="#" id="div-4-col-3-atl3"><a-image id="div-4-col-3-img-3" width="100%" :preview="false" src="https://picsum.photos/id/10/106/68"></a-image></a-typography-link>
        </a-typography-paragraph>
      </a-typography-paragraph>
    </a-typography-paragraph>
    <a-typography-paragraph class="py-6 bg-gray-200 !m-0" id="div-5">
      <a-typography-paragraph id="r-2" class="w-2 h-2 m-auto rounded-full block bg-blue-800 !mb-2"></a-typography-paragraph>
      <a-typography-title id="att-3" :level="3" class="text-center">新闻与媒体</a-typography-title>
      <a-typography-paragraph class="text-center mt-6 flex justify-center gap-2" id="div-5-row1">
        <a-typography-link class="flex bg-white max-h-[300px]" :id="`div-5-row1-col-${index}`" :key="index" v-for="(item, index) in list2">
          <a-image :id="`div-5-row1-col-${index}-img`" width="100%"  :preview="false"  :src="item.img"></a-image>
          <a-typography-paragraph :id="`div-5-row1-col-${index}-div`" class="text-left p-2 max-w-44 flex flex-col justify-between !m-0">
            <a-typography-paragraph :id="`div-5-row1-col-${index}-atp1`">{{item.title}}</a-typography-paragraph>
            <a-typography-paragraph :id="`div-5-row1-col-${index}-atp2`" class="text-gray-400 text-sm">{{item.time}}</a-typography-paragraph>
            <a-typography-link :id="`div-5-row1-col-${index}-atl`" class="w-24 bg-blue-800 !text-white text-center py-2">详情</a-typography-link>
          </a-typography-paragraph>
        </a-typography-link>
      </a-typography-paragraph>
      <a-typography-paragraph class="text-center !-mt-2 justify-center flex gap-2" id="div-5-row2">
        <a-typography-link class="bg-white text-left" :id="`div-5-row2-col-${index}`" v-for="(item, index) in list" :key="index">
          <a-image :preview="false" width="100%" :id="`div-5-row2-col-1-img${index}`" :src="item.img"></a-image>
          <a-typography-paragraph :id="`div-5-row2-col-1-atp1${index}`" class="m-2 max-w-[240px] text-sm min-h-14">{{item.title}}</a-typography-paragraph>
          <a-typography-paragraph :id="`div-5-row2-col-1-atp2${index}`" class="text-gray-400 m-2 text-sm">{{item.time}}</a-typography-paragraph>
        </a-typography-link>
      </a-typography-paragraph>
      <a-typography-paragraph id="more" class="text-center mt-12">
        <a-typography-link id="more-atl" class="text-xl !text-gray-400 rounded-3xl border-2 border-solid py-4 px-20">查看更多新闻<RightOutlined id="more-icon"/></a-typography-link>
      </a-typography-paragraph>
    </a-typography-paragraph>
  </div>
</template>
<script setup>
const indexImage = "https://picsum.photos/id/10/1080/300";
const list2 = [{
  img: 'https://picsum.photos/id/11/240/195',
  title: '立邦中国成功中标中铁十四局2025年度涂料集采项目',
  time: '2025-02-27'
},{
  img: 'https://picsum.photos/id/12/240/195',
  title: '立邦成功中标中建二局2025年度涂料集采项目',
  time: '2025-02-18'
}
]
const list1 = [{
  img: 'https://picsum.photos/id/0/100/100',
  title: '装饰涂料',
  color: 'text-yellow-700'
},{
  img: 'https://picsum.photos/id/1/100/100',
  title: '刷新服务',
  color: 'text-lime-900'
},{
  img: 'https://picsum.photos/id/2/100/100',
  title: '防水与瓷砖铺贴',
  color: 'text-yellow-950'
},{
  img: 'https://picsum.photos/id/3/100/100',
  title: '美缝剂',
  color: 'text-yellow-700'
},{
  img: 'https://picsum.photos/id/4/100/100',
  title: '汽车涂料',
  color: 'text-stone-400'
},{
  img: 'https://picsum.photos/id/5/100/100',
  title: '建筑工程',
  color: 'text-lime-400'
}]
const list = [{
  img: 'https://picsum.photos/id/13/262/135',
  title: '立邦高性能哑光清漆已率先应用于长安汽车',
  time: '2025-02-17'
},{
  img: 'https://picsum.photos/id/14/262/135',
  title: '立邦船舶涂料荣获招商局金陵船舶“优秀合作油漆供应商”称号',
  time: '2025-02-13'
},{
  img: 'https://picsum.photos/id/15/262/135',
  title: '喜讯！立邦上海、廊坊工厂获评“国家级绿色工厂”',
  time: '2025-01-25'
}]

</script>
<style scoped></style>
